<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.68.3" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>vue的安装 &middot; 我的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0b ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/my_technology_blog/"><h1>我的博客</h1></a>
      <p class="lead">
       杨博的博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/my_technology_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2021. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>vue的安装</h1>
  <time datetime=2020-04-03T15:20:01&#43;0800 class="post-date">Fri, Apr 3, 2020</time>
  <ol>
<li>安装node.js</li>
<li>安装npm:npm install -g cnpm &ndash;registry=https://registry.npm.taobao.org</li>
<li>使用cnpm安装vue:cnpm install vue -g</li>
<li>安装vue命令行工具：cnpm install vue-cli -g</li>
<li>安装vue-devtools调试工具：</li>
<li>创建vue脚手架:vue init webpack myproject
<ol>
<li>vue init webpack myproject</li>
<li>cd myproject // 进入目录</li>
<li>cnpm install // 安装依赖</li>
<li>cnpm run dev // 开启服务
<ul>
<li>src 主开发目录，所有的单文件组件都会放在这个目录下</li>
<li>static 项目静态目录，所有的css、js都会放在这个文件夹下</li>
<li>dist 项目打包发布文件夹，最后要上线单文件夹项目都在这个文件夹中 - node_modules node的包目录</li>
<li>config 配置目录</li>
<li>build 项目打包时依赖的目录</li>
</ul>
</li>
</ol>
</li>
<li>常用命令
<ol>
<li>v-html:将内容按照html格式进行插入</li>
<li>v-text:将内容按照文本格式进行插入，但会覆盖原有标签内的内容，不会有加载的闪烁问题</li>
<li>v-cloak:解决加载时的闪烁问题</li>
</ol>
</li>
<li>绑定属性:v-bind 或者 直接写 冒号 如果我们需要设置的模板变量是一个属性，比如a标签的href属性</li>
<li>绑定事件：v-on 或者 @ 符号:给元素绑定对应事件。</li>
<li>表单绑定 v-model：</li>
<li>动态绑定</li>
</ol>
<p>当某些情况下，无法确定表单中所代表的属性值，可以使用v-bind进行动态绑定，v-&gt; model获取到的表单输入 此时则是我们定义的v-bind属性值</p>
<ol start="12">
<li>
<p>v-if 指令用于条件性的渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候渲染</p>
</li>
<li>
<p>与v-if不同的是: v-show 的元素始终会被渲染并保留在 DOM 中 v-show 只是简单地切换元素的 CSS 属性 display</p>
</li>
<li>
<p>Vue实例生命周期</p>
<ul>
<li>beforeCreate 数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象</li>
<li>created 数据已经绑定到了对象实例，但是还没有挂载对象</li>
<li>beforeMount 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的 $el属性</li>
</ul>
<hr>
<p>$el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段， 准备注入到我们vue实例指明的el属性所对应的挂载点 &mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&ndash;</p>
<ul>
<li>mounted 将$el的内容挂载到了el，相当于我们在jQuery执行了$(el).html($el),生成页面上真正的dom</li>
</ul>
<hr>
<p>上面我们就会发现页面的元素和我们$el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进 行各种操作 &mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;-</p>
<ul>
<li>beforeUpdate 数据发生变化时调用</li>
<li>updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子</li>
<li>beforeDestroy Vue实例销毁前 - destroyed Vue实例销毁后</li>
</ul>
</li>
</ol>

</div>


    </main>

    
  </body>
</html>
